<template>
  <el-row align="middle" style="height:100%;border-bottom: 1px var(--el-border-color) var(--el-border-style);"
    :gutter="24">
    <el-col :span="1" style="display:flex;align-items:center">
      <el-icon>
        <Expand @click="isCollapse = false" v-if="isCollapse" />
        <Fold v-else @click="isCollapse = true" />
      </el-icon>
    </el-col>
    <el-col class="hidden-xs-only" :span="16">
      <el-breadcrumb>
        <el-breadcrumb-item class="animation" v-for="item in routerPath" :key="item.key"
          :to="item.children && item.children.length ? item.children[0].key : item.key">
          {{ $t('menu.' + item.name) }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col :span="6">
      <functionalityButton></functionalityButton>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { inject, computed, defineAsyncComponent } from 'vue'
import { useStore } from 'vuex'
const functionalityButton = defineAsyncComponent(() => import('@/components/functionality-button.vue'))
const store = useStore()
const isCollapse = inject("isCollapse")
const routerPath = computed(() => store.state.routerPath)

</script>

<style>
@keyframes inTo {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
}

@keyframes outTo {
  to {
    transform: translateX(30px);
    opacity: 0;
  }
}

.animation {
  animation: inTo .3s cubic-bezier(0.96, 0, 0.58, 1);
  /* animation: outTo .3s ease-in-out; */
}
</style>